<template>
  <div class="task-bar">
    <h4>任务导航</h4>
    <div class="card-box">
      <div class="task-card">
        <i class="iconfont icon_db_shouhuo@2x icon_db_shouhuo2x" style="backgroundColor:#0076ff;" />
        <span>收货任务</span>
      </div>
      <div class="task-card">
        <i class="iconfont icon_db_shangjia@2x icon_db_shangjia2x" style="backgroundColor:#52d4f3;" />
        <span>上架任务</span>
      </div>
      <div class="task-card">
        <i class="iconfont icon_db_renwu@2x icon_db_renwu2x" style="backgroundColor:#ff7100;" />
        <span>盘点任务</span>
      </div>
      <div class="task-card">
        <i class="iconfont icon_db_lianhuo@2x icon_db_lianhuo2x" style="backgroundColor:#ff609e;" />
        <span>拣货任务</span>
      </div>
      <div class="task-card">
        <i class="iconfont icon_db_jiaojie@2x icon_db_jiaojie2x" style="backgroundColor:#ffb200;" />
        <span>交接任务</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
.task-bar {
  margin-top: 20px;
  background-color: #fff;
  border-radius: 20px;
  box-shadow: 2px 2px 2px 2px #c9c9c9;
  padding: 20px;
  .card-box{
    display: flex;
    justify-content: space-around;
    align-items: center;
    .task-card{
      padding: 30px 50px;
      background-color: #fbf7f7;
      &:hover{
        background-color: #fff;
        box-shadow: 1px 1px 1px 3px #fbf7f7;
      }
      i{
        display: inline-block;
        width: 50px;
        height: 50px;
        font-size: 28px;
        color: #fff;
        border-radius: 50%;
        line-height: 50px;
        text-align: center;
        margin-right: 50px;
        background-color: #000;
      }
    }
  }
}
</style>
